<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>考试试卷查看</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	 <link rel="stylesheet" href='<c:url value="/share/bootstrap.min.css"></c:url>'> 
	 <link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'> 
		 <script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
		<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
		<script src='<c:url value="/js/all.js"></c:url>'></script> 
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<style type="text/css">
		.Examination_list>li{
			width: 100% !important;
			text-align: left;
			padding: 15px;
			margin-bottom: 15px;
			margin-top: 15px;
			border: 1px solid #494949;
		}
		.Examination_list>li:nth-child(1){
			margin-top: 0;
		}
		/* .Examination_list>li:nth-last-child(1){
			margin-bottom: 0;
		} */
		.Examination_list_title{
			border: 1px solid #a4a4a4;
			padding: 6px 12px;
		}
		.Examination_list_title>span{
			background: #295c96;
		    color: #fff;
		    padding: 3px 6px;
		    border-radius: 50%;
		}
		.Examination_list_title>font {
			color:#295c96;
			word-wrap: break-word;
		}
		.Examination_list_content{
			border: 1px solid #a4a4a4;
			padding: 10px 25px;
			margin-top: 10px;
		}
		.Examination_list_content>li{
			width: 100% !important;
			position: relative;
    		overflow: hidden;
    		padding: 4px 0;
		}
		.Examination_list_content>li>input{
			float: left;
			margin-right: 10px;
		}
		.content_Examination_list_left>ul>li{
			width: auto !important;
    		padding: 5px 0px;
		    background: #cecece;
		    color: #fff;
		    margin-bottom: 10px;
		    cursor : pointer;
		}
		.home_content{
		background: #e3e8ea;
		}
		.content_Examination_list_left{
			top: 20px;
			padding: 0;
			position:absolute;
			right:986px !important;
		}
		.content_Examination_list_center{
			position:absolute;
			right:54px;
		}
		.jake_Wang_Bg295c96{
			background: #295c96 !important;
		}
		.content_Examination_list_right{
			background: #FDA76A !important;
			color: #fff;
			top: 20px;
			position:absolute;
			right:0px;
		}
	</style>
</head>
<body>
	<div class="home_content Interface_center" style="position: relative;">
		<!--<div class="case_details_title">考试&nbsp;>&nbsp;<span style="color: #82b4ee;">英语语法试题</span></div>-->
		<div class="row" style="text-align: center;margin-bottom: 40px;position: relative;">
			<div class="col-xs-1 content_Examination_list_left">
				<ul >
						<li  class="jake_Wang_Bg295c96" style="display: none;"id="type_0">单选题</li>
						<li style="display: none;"id="type_1">多选题</li>
						<li style="display: none;"id="type_2">判断题</li>
						<li style="display: none;"id="type_3">解答题</li>
				</ul>
			</div>
			<div class="col-xs-10 content_Examination_list_center" id="paperinfo_list_dateils" style="padding: 40px;background-color: #fff;">
				<ul class="Examination_list" id = "questionType_0">
				</ul>
				<ul class="Examination_list" id = "questionType_1">
				</ul>
				<ul class="Examination_list" id = "questionType_2">
				</ul>
				<ul class="Examination_list" id = "questionType_3">
				</ul>
			</div>
			<%-- <div class="col-xs-1 content_Examination_list_right">
				<img src='<c:url value="/share/images/jiaojuan.png"></c:url>' style="width: auto;height: auto;margin-top: 5px;margin-bottom: 5px;">
				<p>交卷</p>
			</div> --%>
		</div>
	</div>

	<script type="text/javascript">
	var rootPath = '${rootPath}';
	var paperId = '${paperId}';
	var flag=true;
	$("body").css("width", $(window).width());
	$("body").css("height", $(window).height());
	$(".content_Examination_list_left").css({
		right: $(".content_Examination_list_right").width() + $(".content_Examination_list_center").width() +$(".content_Examination_list_left").width() - 12  +"px"
	});
	$(function(){
		$(".content_Examination_list_right").click(function(){
			//location.href = "Examination_details_2.html";
		});
		getTestIdList();
	});
	$(".content_Examination_list_left li").click(function  () {
		if ($(this).index()==0) {
			state1();
		}else if($(this).index()==1){
			state2();
		}else if($(this).index()==2){
			state3();
		}else if($(this).index()==3){
			state4();
		}
	});
	function state1(){
		$(".content_Examination_list_left li").not($("#type_0")).removeClass();
		$("#type_0").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").show();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
	}
	function state2(){
		$(".content_Examination_list_left li").not($("#type_1")).removeClass();
		$("#type_1").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").show();
		$("#questionType_2").hide();
		$("#questionType_3").hide();
	}
	function state3(){
		$(".content_Examination_list_left li").not($("#type_2")).removeClass();
		$("#type_2").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").show();
		$("#questionType_3").hide();
	}
	function state4(){
		$(".content_Examination_list_left li").not($("#type_3")).removeClass();
		$("#type_3").addClass("jake_Wang_Bg295c96");
		$("#questionType_0").hide();
		$("#questionType_1").hide();
		$("#questionType_2").hide();
		$("#questionType_3").show();
	}
	function getTestIdList() {
		var url = rootPath + "/testPaper/testList/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "html",
			data : {},
			success : function(data) {
				if (data) {
					questionId = data;
					getTestList(questionId);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				alert("失败！");
			}
		});
	}
	function getTestList(id) {
		var url = rootPath + "/testPaper/questionListData";
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {'data':id},
			success : function(data) {
				if (data) {
					showTest(data);
				} else {
					alert("获取信息失败！");
				}
			},
			error : function() {
				alert("失败！");
			}
		});
	}
	function showTest(data) {
		var htmStr0=""; 
		var htmStr1=""; 
		var htmStr2=""; 
		var htmStr3=""; 
		var htmStr="";
		length = data.length;
		var id =0,id1=0,id2=0,id3=0,id4=0;
		for(var i = 0; i < length; i++){
			id++;
			if (data[i].class_id == "单选题") {
				id1++;
				htmStr0 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id1+"</span>"
					+"<font>"+data[i].question+"</font>"
					+"</div>"
					+"<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr0 += "<li>"
							+ "<input type=\"radio\" name=\"one_choice_"+id+"\" value=\""+option+"\" />&nbsp;"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr0 += "</ul></li>";
			}else if (data[i].class_id == "多选题") {
				id2++;
				htmStr1 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id2+"</span>"
					+"<font>"+data[i].question+"</font>"
					+"</div>"
					+"<ul class=\"Examination_list_content\">";
				var str = data[i].selects;
				var arr = str.split(",nwebadjj,_");
				for (var j = 0; j < arr.length; j++) {
					var option = String.fromCharCode(j + 65);
					htmStr1 += "<li>"
							+ "<input type=\"checkbox\" name=\"check_"+id+"\" value = \""+option+"\"/>&nbsp;"
							+ "<font>" + option + '、' + arr[j] + "</font>"
							+ "</li>";
				}
				htmStr1 += "</ul></li>";
			}else if (data[i].class_id == "判断题") {
				id3++;
				htmStr2 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id3+"</span>"
					+"<font>"+data[i].question+"</font>"
					+"</div>"
					+"<ul class=\"Examination_list_content\">";
				htmStr2 += "<li><input type=\"radio\" name=\"true_or_false_"+id+"\" value = \"true\"/>&nbsp;<font>是</font>"
							+ "</li><li><input type=\"radio\" name=\"true_or_false_"+id+"\" value = \"false\"/>&nbsp;<font>否</font>"
							+ "</li>";
				htmStr2 += "</ul></li>";
				
			}else if (data[i].class_id == "解答题") {
				id4++;
				htmStr3 +=	"<li><div class=\"Examination_list_title\">"
					+"<span style=\"background: #295c96; color: #fff;padding: 0px 10px;border-radius: 15px 15px 15px 15px;margin-right: 10px;\">"+id4+"</span>"
					+"<font>"+data[i].question+"</font>"
				+"</div>";
				+"<ul class=\"Examination_list_content\" style=\"border:0px;padding:0px;\">";
				htmStr3 += "<textarea id=\"solution_"+id+"\" style =\"min-height:60px;margin-top:10px;width:100%;padding:10px 25px;\" autoHeight=\"true\"></textarea>";
				htmStr3 += "</ul></li>";
			}
			
		}
		if(htmStr0){
			$("#question_0").show();
			$("#questionType_0").html(htmStr0);
			$(".content_Examination_list_left ul li:eq(0)").show();
			state1();
		}else{
			$(".content_Examination_list_left ul li:eq(0)").hide();
		}
		if(htmStr1){
			$("#questionType_1").html(htmStr1);
			$("#question_1").show();
			$(".content_Examination_list_left ul li:eq(1)").show();
			state2();
		}else{
			$(".content_Examination_list_left ul li:eq(1)").hide();
		}
		if(htmStr2){
			$("#questionType_2").html(htmStr2);
			$("#question_2").show();
			$(".content_Examination_list_left ul li:eq(2)").show();
			state3();
		}else{
			$(".content_Examination_list_left ul li:eq(2)").hide();
		}
		if(htmStr3){
			$("#question_3").show();
			$("#questionType_3").html(htmStr3);
			$(".content_Examination_list_left ul li:eq(3)").show();
			state4();
		}else{
			$(".content_Examination_list_left ul li:eq(3)").hide();
		}
		
		if(flag){
			var index = $(".content_Examination_list_left li").siblings("li:visible")[0].id;
			var indexidnum = index.charAt(index.length - 1);
			if(indexidnum == 0){
				state1();
			}else if(indexidnum == 1){
				state2();
			}else if(indexidnum == 2){
				state3();
			}else{
				state4();
			}
			flag = false;
		}
		
		/* textarea div高度自适应 */
		$.fn.autoHeight = function(){
			function autoHeight(elem){
				elem.style.height = 'auto';
				elem.scrollTop = 0; //防抖动
				elem.style.height = elem.scrollHeight + 'px';
			}
		
			this.each(function(){
				autoHeight(this);
				$(this).on('keyup', function(){
					autoHeight(this);
				});
			});

		}
		$('div[autoHeight]').autoHeight();
		$('textarea[autoHeight]').autoHeight();
		$('textarea[autoHeight]').css("overflow","hidden");
		$('textarea').css("resize","none");
	}
	</script>
</body>
</html>